<template>
  <div class="screen-list-wrapper">
    <a-checkbox-group @change="onChange" v-model="checkedColumns">
      <a-row>
        <a-col :span="24" v-for="(column,index) in columns" :key="index">
          <a-checkbox :value="column.dataIndex">{{column.title}}</a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedColumns: []
    };
  },
  created() {
    this.checkedColumns = this.columns
      .filter(column => {
        return column.hidden !== true;
      })
      .map(column => column.dataIndex);
  },
  methods: {
    onChange(checkedColumns) {
      this.$emit("change", checkedColumns);
    }
  }
};
</script>

<style>
.screen-list-wrapper .ant-col {
  line-height: 30px;
}
</style>